@import './variables.less';

.el-input__inner {
  color: @color-white;
  border-color: #3a3b5e;
  background-color: #222336;
}

.el-input__inner:hover,
.el-select:hover .el-input__inner,
.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: @color-primary;
}

.el-dropdown-menu{
  border-color: #3a3b5e;
  background-color: #222336;
}
.el-popper[x-placement^=top] .popper__arrow{
  border-top-color: #3a3b5e;
}
.el-popper[x-placement^=top] .popper__arrow::after{
  border-top-color: #222336;
}


.el-select-dropdown {
  border-color: #3a3b5e;
  background-color: #222336;
}
.el-select-dropdown__item {
  color: #8182a5;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  color: @color-white;
  background-color: @color-primary;
}

.el-popper[x-placement^='bottom'] .popper__arrow {
  border-bottom-color: #3a3b5e;
}
.el-popper[x-placement^='bottom'] .popper__arrow::after {
  border-bottom-color: #222336;
}

.el-select .el-tag {
  border-color: #32354d;
  background-color: #32354d;
}

.el-picker-panel {
  border-color: #3a3b5e;
  background-color: #222336;
}
.el-picker-panel__icon-btn {
  color: #bbb;
}
.el-date-range-picker__content.is-left {
  border-color: #3a3b5e;
}
.el-date-table th {
  border-color: #3a3b5e;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
  background-color: #32354d;
}
.el-date-table td.end-date span,
.el-date-table td.start-date span {
  background-color: @color-primary;
}
.el-date-editor .el-range-input {
  color: @color-white;
  background-color: transparent;
}
.el-date-editor .el-range-separator {
  color: #ccc;
}

.area-select,
.cascader-menu-list-wrap,
.cascader-menu-list {
  color: #8182a5;
  border-color: #3a3b5e;
  background-color: #222336;
}
.area-select {
  display: flex;
  align-items: center;
  color: @color-white;
}
.area-select .area-selected-trigger {
  height: auto;
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.area-select .area-select-icon {
  right: 12px;
  margin-top: -5px;
  width: 8px;
  height: 8px;
  border: none;
  border-right: 1px solid #c0c4cc;
  border-bottom: 1px solid #c0c4cc;
  transform: rotate(45deg);
}
.area-select .area-select-icon.active {
  margin-top: -8px;
  transform: rotate(-135deg);
}
.cascader-menu-list .cascader-menu-option.selected,
.cascader-menu-list .cascader-menu-option:hover {
  color: @color-white;
  background-color: @color-primary;
}
.area-select:hover {
  border-color: @color-primary;
}
.area-select.large,
.area-select.small,
.area-select.mini {
  width: 100%;
}


.el-cascader__dropdown{
  color: #8182a5;
  border-color: #3a3b5e;
  background-color: #222336;
}
.el-cascader-menu{
  color: #8182a5;
  border-color: #3a3b5e;
}
.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover{
  color: @color-white;
  background-color: @color-primary;
}
.el-cascader:not(.is-disabled):hover .el-input__inner{
  border-color: @color-primary;
}

  

.el-loading-mask {
  background-color: rgba(34, 35, 54, 0.7);
}
.el-table {
  background-color: #222336;
  &.el-table--border,
  &.el-table--group {
    border-color: #222336;
    &::after,
    &::before {
      background-color: #222336;
    }
  }
  .el-table__header th.el-table__cell,
  .el-table__header tr {
    color: #8182a5;
    font-weight: normal;
    border-color: #222336;
    background-color: #3d3e58;
  }
  .el-table__header .cell{
    white-space: nowrap;
  }
  .el-table__body th,
  .el-table__body .el-table__row {
    color: #8182a5;
    border-bottom: 0;
    background-color: #28293e;
    td {
      border-width: 0 1px 1px 0;
      border-style: solid;
      border-color: #222336;
    }
    &:hover {
      td.el-table__cell {
        color: #fff;
        background: #32354d;
      }
    }
  }
}
.el-pagination__total {
  color: #8182a5;
}
.el-pager li,
.el-pagination button:disabled,
.el-pagination .btn-next,
.el-pagination .btn-prev {
  color: #8182a5;
  background-color: transparent;
}


.el-dialog{
  margin: 0 auto;
  border: 1px solid #373737;
  background-color: #182032;
  .el-dialog__header{
    padding: 15px 20px;
    border-bottom: 1px solid #373737;
  }
  .el-dialog__title{
    color: #fff;
  }
  .el-dialog__body{
    padding: 0;
  }
}